<template>
  <div class="date-panel">

    <date-panel ref="datePanel" @pick="pick"></date-panel>

  </div>
</template>
<script>
import DatePanel from 'element-ui/packages/date-picker/src/panel/date.vue';

export default {
  name: 'ElDatePanel',
  props: {
    date: {
      default: new Date(),
      type: Date
    },
    showTime: {
      default: false,
      type: Boolean
    }
  },
  components: {
    DatePanel,
  },
  model: {
    prop: 'date',
    event: 'change'
  },
  mounted() {
    this.$refs.datePanel.value = this.date;
    //this.$refs.datePanel.showTime = this.showTime;
    this.$refs.datePanel.visible = true;
  },
  methods: {
    pick(date) {

      this.$refs.datePanel.value = date;
      this.$refs.datePanel.resetView && this.$refs.datePanel.resetView();
      this.$emit("change", date);
    },
  },
}
</script>
<style scoped>
.date-panel >>> .el-picker-panel__footer{ display: none!important; }
.date-panel >>> .el-picker-panel{box-shadow:none;border:0}

::v-deep.el-picker-panel__body{

  text-align:center
}


::v-deep.el-date-picker {
  width: 327px;
}
::v-deep.el-date-picker .el-picker-panel__content {
  width: 300px;

}
::v-deep.el-picker-panel__icon-btn {
  font-size: 18px;
}



</style>
